<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${name}特殊考勤</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/icon.css">
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery-1.8.0.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="<%=path%>/js/post.js"></script>
<script type="text/javascript" src="<%=path%>/js/util.js"></script>
<script type="text/javascript">
	var path = '${pageContext.request.contextPath}';

	function print() {
		var start = $('#selectStartDate').datebox('getValue');
		var end = $('#selectEndDate').datebox('getValue');
		var name = $('#searchName').val();

		var url = path + '/special/print/?id=${code}';
		url += '&name=' + name;
		url += '&startDate=' + start;
		url += '&endDate=' + end;
		url += '&user=${user}';
		window.open(url, "_blank",
						"toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no");
	}

	function search() {
		var start = $('#selectStartDate').datebox('getValue');
		var end = $('#selectEndDate').datebox('getValue');
		var name = $('#searchName').val();
		var grid = $('#grid');
		grid.datagrid('load', {
			id : '${code}',
			name : name,
			startDate : start,
			endDate : end
		});
	}

	function showUpload() {
		var form = $('#formUpload');
		form.form('clear');
		$('#dlgUpload').dialog('open');
	}

	function uploadData() {
		var form = $('#formUpload');
		var url = path + '/special/import/';
		$.messager.progress();
		form.form('submit', {
			url : url,
			success : function(d) {
				$.messager.progress('close');
				$('#dlgUpload').dialog('close');

				showImport($.parseJSON(d));
			},
			error : function() {
				$.messager.progress('close');
				$.messager.alert('错误', '无法处理！', 'error');
			}
		});
	}

	function showImport(d) {
		var grid = $('#gridImport');
		grid.datagrid('loadData', d);
		$('#dlgImport').dialog('open');
	}

	function setNowDate() {
		var date = new Date();
		date.setDate(1);
		$('#selectStartDate').datebox(
				'setValue',
				date.getFullYear() + '-' + (date.getMonth() + 1) + '-'
						+ date.getDate());
		date.setMonth(date.getMonth() + 1);
		date.setDate(date.getDate() - 1);
		$('#selectEndDate').datebox(
				'setValue',
				date.getFullYear() + '-' + (date.getMonth() + 1) + '-'
						+ date.getDate());
	}

	$(function() {
		setNowDate();
		search();
	});
</script>
</head>
<body class="easyui-layout">
	<!-- 上传-->
	<div id="dlgUpload" class="easyui-dialog" title="上传文件"
		style="width:320px;height:150px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						uploadData();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgUpload').dialog('close');
					}
				}]
			">
		<form id="formUpload" method="post" enctype="multipart/form-data">
			<table>
				<tr>
					<td>文件:</td>
					<td><input name="filedata" type="file" /></td>
				</tr>
			</table>
		</form>
		<a href="<%=path%>/data/special.xls" class="easyui-linkbutton"
			iconCls="icon-add" plain="true">模板下载</a> <a
			href="<%=path%>/data/specialList.xls" class="easyui-linkbutton"
			iconCls="icon-add" plain="true">范例下载</a>
	</div>

	<!-- 导入 -->
	<div id="dlgImport" class="easyui-dialog" title="导入"
		style="width:680px;height:420px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'关闭',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgImport').dialog('close');
					}
				}]
			">
		<table id="gridImport" class="easyui-datagrid"
			data-options="
			remoteSort: false,
			idField: 'id',
			fit: true,
			singleSelect: true,
			collapsible: true,
			rownumbers: true,
			showFooter: true,
			striped: true
			">
			<thead>
				<tr>
					<th data-options="field:'employeeCode',width:80">员工编号</th>
					<th data-options="field:'employeeName',width:80">员工姓名</th>
					<th data-options="field:'cardDate',width:120">考勤日期</th>
					<th data-options="field:'reason',width:240">原因</th>
				</tr>
			</thead>
		</table>
	</div>

	<!-- 工具栏 -->
	<div id="tb" style="height:auto">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="showUpload()">导入验证</a> <a href="#"
				class="easyui-linkbutton" iconCls="icon-print" plain="true"
				onclick="print()">打印预览</a>
		</div>
		<div>
			时间从： <input id="selectStartDate" class="easyui-datebox"
				data-options="onSelect:search" /> 到： <input id="selectEndDate"
				class="easyui-datebox" data-options="onSelect:search" /> 检索条件: <input
				class="easyui-validatebox" type="text" id="searchName"
				onchange="search()" />
		</div>
	</div>

	<div data-options="region:'center'">
		<table id="grid" class="easyui-datagrid"
			data-options="
			sortOrder:'desc',
			sortName:'date',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/special/loadAll/',
			toolbar:'#tb',
			striped: true,
			pageSize:20,
			pagination:true,
			fitColumns:false,
			rownumbers:true
			">
			<thead>
				<tr>
					<th data-options="field:'employeeCode',width:100,align:'left'">工号</th>
					<th data-options="field:'employeeName',width:100,align:'left'">姓名</th>
					<th
						data-options="field:'date',width:80,align:'left',formatter:formatDate">添加日期</th>
					<th data-options="field:'cardDate',width:120,align:'left'">考勤始时间</th>
					<th data-options="field:'reason',width:200,align:'left',fixed:true">原因</th>
				</tr>
			</thead>
		</table>

	</div>
</body>
</html>